<!-- 策略面板 -->
<template>
  <view class="panel flex-c-a" v-if="item.isStart != -1">
    <view class="t flex">
      <text>{{item.gridType | getGridName}}</text>
      <view>
        <text>huobi</text>-
        <text v-text="item.baseCurrency">u本位</text>-
        <text v-text="item.quoteCurrency">btc</text>
      </view>
      
      <text class="status">{{item.isStart | getGridStatus}}</text>
    </view>
    <view class="c flex-w">
      <view class="tab flex-c">
        <text class="title">投入资金</text>
        <view class="value">
          <text v-text="item.funding"></text>
          <text class="title">(usdt)</text>
        </view>
      </view>
      <view class="tab flex-c">
        <text class="title">累计收益/套利次数</text>
        <view class="value">32000<text class="title">(usdt)</text>/200<text class="title">次</text></view>
      </view>
      <view class="tab flex-c">
        <text class="title">年化收益</text>
        <view class="value">32000<text class="title">(usdt)</text></view>
      </view>
      <view class="tab flex-c">
        <text class="title">今日收益</text>
        <view class="value">32000<text class="title">(usdt)</text></view>
      </view>
      <view class="tab flex-c">
        <text class="title">持仓均价/数量</text>
        <view class="value">32000/2.27<text class="title">张</text></view>
      </view>
      <view class="tab flex-c">
        <text class="title">爆仓价</text>
        <view class="value">32000<text class="title">(usdt)</text></view>
      </view>
    </view>
    <view class="b flex">
      <image src="/static/home/home_share@2x.png" class="icon2" mode="" @click="onAppShare" style="width: 40rpx; height: 40rpx;"></image>
      <view class="btn flex">
          <u-button v-show="item.isStart != 1" :custom-style="customStylemodify" type="info" shape="square" size="mini" class="share" @click="modify(item.gridType, item.id)">修改</u-button>
					<u-button v-show="item.isStart != 1" :custom-style="customStylestart" type="success" shape="square" size="mini" class="share" @click="start(item.gridType, item.id)">启动</u-button>
					<u-button v-show="item.isStart == 1" :custom-style="customStylepause" type="primary" shape="square" size="mini" class="share" @click="pause(item.gridType, item.id)">暂停</u-button>
					<u-button v-show="item.isStart == 1" :custom-style="customStylestop" type="warning" shape="square" size="mini" class="share" @click="stop(item.gridType, item.id)">停止</u-button>
					<u-button v-show="(item.isStart == 3) || (item.isStart == 0)" :custom-style="customStyledelete" type="error" shape="square" size="mini" class="share" @click="del(item.gridType, item.id)">删除</u-button>
      </view>
    </view>

    <u-modal v-model="showstart" :show-cancel-button="true" :content="contentstart" @confirm="confirmstart" @cancel="cancelstart"></u-modal>
		<u-modal v-model="showpause" :show-cancel-button="true" :content="contentpause" @confirm="confirmpause" @cancel="cancelmpause"></u-modal>
		<u-modal v-model="showstop" :show-cancel-button="true" :content="contentstop" @confirm="confirmstop" @cancel="cancelstop"></u-modal>
		<u-modal v-model="showdel" :show-cancel-button="true" :content="contentdel" @confirm="confirmdel" @cancel="canceldel"></u-modal>
  </view>
</template>

<script>
import {commonMixin} from '@/common/mixin/mixin.js'
export default {
  props:{
    item: {
			type: Object,
			default() {
				return {}
			}
		},
  },
  mixins: [commonMixin],
  data () {
    return {
      type:0,
      id:0,
      showModify:false,
				showstart:false,
				showpause:false,
				showstop:false,
				showdel:false,
				contentModify:'是否修改',
				contentstart:'是否启动',
				contentpause:'是否暂停',
				contentstop:'是否停止',
				contentdel:'是否删除',
      customStylemodify:{
        width:'75rpx',
        height:'44rpx',
        color:'#fff',
        backgroundColor:"#1488FF"
      },
      customStylestart:{
        width:'75rpx',
        height:'44rpx',
        color:'#fff',
        backgroundColor:"#FFB400"
      },
      customStylepause:{
        width:'75rpx',
        height:'44rpx',
        color:'#fff',
        backgroundColor:"#2AAD27"
      },
      customStylestop:{
        width:'75rpx',
        height:'44rpx',
        color:'#fff',
        backgroundColor:"#FE5021"
      },
      customStyledelete:{
        width:'75rpx',
        height:'44rpx',
        color:'#fff',
        backgroundColor:"#999999"
      }
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
      modify(i,id){
				console.log(i)
        i += ''
				switch(i){
					case '1':
						this.$u.func.route(`/pages/coin/quantization/modify/modify-ai-contract?id=${id}&type=${i}`)
						break;
					case '2':
						this.$u.func.route(`/pages/coin/quantization/modify/modify-smart-contract?id=${id}&type=${i}`)
						break;
          case '3':
						this.$u.func.route(`/pages/coin/quantization/modify/modify-spot-network?id=${id}&type=${i}`)
						break;
					case '4':
						this.$u.func.route(`/pages/coin/quantization/modify/modify-spot-ai?id=${id}&type=${i}`)
						break
					
				}
				
			},
			start(type, id){
				this.showstart = true;
        this.type = type
        this.id = id
			},
			pause(type, id){
				this.showpause = true;
        this.type = type
        this.id = id
			},
			stop(type, id){
				this.showstop = true;
        this.type = type
        this.id = id
			},
			del(type, id){
				this.showdel= true;
        this.type = type
        this.id = id
			},
			confirmstart(){
        this.$http.put(`app/grid/start?type=${this.type}&id=${this.id}`).then(res => {
          // console.log('start', res)
          uni.$emit('start',{
            type:this.type,
            id:this.id
          })
        })
			},
			confirmpause() {
        this.$http.put(`app/grid/pause?type=${this.type}&id=${this.id}`).then(res => {
          // console.log('pause', res)
          uni.$emit('pause',{
            type:this.type,
            id:this.id
          })
        })
			},
			confirmstop(){
        this.$http.put(`app/grid/stop?type=${this.type}&id=${this.id}`).then(res => {
          // console.log('stop', res)
          uni.$emit('stop',{
            type:this.type,
            id:this.id
          })
        })
			},
			confirmdel(){
        this.$http.put(`app/grid/del?type=${this.type}&id=${this.id}`).then(res => {
          // console.log('del', res)
          uni.$emit('del',{
            type:this.type,
            id:this.id
          })
        })
			},

			cancelstart(){
        this.type = 0
        this.id = 0
			},
			cancelmpause() {
        this.type = 0
        this.id = 0
			},
			cancelstop() {
        this.type = 0
        this.id = 0
			},
			canceldel() {
        this.type = 0
        this.id = 0
			}
  }
}

</script>
<style lang='scss' scoped>
.panel {
  width: 688rpx;
  height: 472rpx;
  background: #FFFFFF;
  border-radius: 12px;
  margin: $p;
  padding: 10rpx 20rpx;
  // border: 1px solid red;
  .t{
    width: 688rpx;
    padding: 0 20rpx;
    text{
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #666666;
    }
    .status {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FE5021;
    }
  }
  .c {
    height: 260rpx;
    margin-top: 60rpx;
    .tab{
      height: 80rpx;
      min-width: 163rpx;
    }
    .title {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    .value {
      font-size: 32rpx;
      font-family: DINPro;
      font-weight: bold;
      color: #333333;
    }
  }
  .b {
    width: 688rpx;
    padding: 0 20rpx;
    .btn {
      min-width: 280rpx;
      font-size: 24rpx;
      .u-btn {
        margin: 0;
      }
    }
  }
}
</style>